<template>
  <div class="or-new-notice">
    <h2>发布新通知</h2>
    <form @submit.prevent="submitNotice" class="notice-form">
      <div class="form-group">
        <label for="receiverType">接收者类型:</label>
        <select id="receiverType" v-model="noticeForm.receiverType" required>
          <option value="0">单独发送(需要填写用户ID)</option>
          <option value="1">所有人</option>
          <option value="2">管理员</option>
          <option value="3">主办方</option>
          <option value="4">用户</option>
          <option value="5">非管理员(主办方和用户)</option>
          <option value="6">非主办方(管理员和用户)</option>
          <option value="7">非用户(管理员和主办方)</option>
        </select>
      </div>

      <div class="form-group" v-if="noticeForm.receiverType === '0'">
        <label for="receiverId">接收者ID:</label>
        <input type="number" id="receiverId" v-model="noticeForm.receiverId" />
      </div>

      <div class="form-group" v-if="noticeForm.receiverType === '0'">
        <label for="receiverOneType">接收者身份:</label>
        <select id="receiverOneType" v-model="noticeForm.receiverOneType" required>
          <option value="0">管理员</option>
          <option value="1">主办方</option>
          <option value="2">用户</option>
        </select>
      </div>

      <div class="form-group">
        <label for="title">标题:</label>
        <input type="text" id="title" v-model="noticeForm.title" required />
      </div>

      <div class="form-group">
        <label for="content">内容:</label>
        <textarea id="content" v-model="noticeForm.content" rows="5" required></textarea>
      </div>

      <div class="form-actions">
        <button type="button" @click="cancel" class="cancel-button">取消发布</button>
        <button type="submit" class="submit-button">发布通知</button>
      </div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义表单数据
const noticeForm = ref({
  receiverType: '1',
  receiverId: null as number | null,
  receiverOneType: null as number | null,
  title: '',
  content: ''
})

// 发布通知
const submitNotice = async () => {
  try {
    // 获取存储在本地的token
    const token = localStorage.getItem('token')
    
    if (!token) {
      alert('未找到有效的身份凭证，请重新登录')
      return
    }

    // 构造请求数据
    const requestData = {
      receiverType: parseInt(noticeForm.value.receiverType),
      receiverId: noticeForm.value.receiverType === '0' ? noticeForm.value.receiverId : null,
      receiverOneType: noticeForm.value.receiverType === '0' ? parseInt(noticeForm.value.receiverOneType?.toString() || '0') : null,
      title: noticeForm.value.title,
      content: noticeForm.value.content
    }

    // 发送请求
    const response = await fetch('http://localhost:8080/notice/publish', {
      method: 'POST',
      headers: {
        'token': token,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(requestData)
    })

    if (response.ok) {
      const result = await response.json()
      // 检查后端返回的success字段
      if (result.success === true) {
        alert('通知发布成功，等待审核')
        // 重置表单
        noticeForm.value = {
          receiverType: '1',
          receiverId: null,
          receiverOneType: null,
          title: '',
          content: ''
        }
        // 触发返回事件
        window.dispatchEvent(new CustomEvent('showNoticeList'))
      } else {
        alert(`发布失败: ${result.message || '未知错误'}`)
      }
    } else {
      alert('网络请求失败')
    }
  } catch (error) {
    console.error('发布通知时出错:', error)
    alert('发布通知时发生错误')
  }
}

// 取消操作
const cancel = () => {
  window.dispatchEvent(new CustomEvent('showNoticeList'))
}
</script>

<style scoped>
.or-new-notice {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.notice-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #2E7D32;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #A5D6A7;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: '微软雅黑 Light', sans-serif;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.cancel-button,
.submit-button {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  font-family: '微软雅黑 Light', sans-serif;
}

.cancel-button {
  background: linear-gradient(to right, #9E9E9E, #757575);
  color: white;
}

.cancel-button:hover {
  background: linear-gradient(to right, #757575, #616161);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.submit-button {
  background: linear-gradient(to right, #66BB6A, #43A047);
  color: white;
}

.submit-button:hover {
  background: linear-gradient(to right, #558B2F, #388E3C);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
</style>